<template>
  <!-- 最外层容器 -->
  <div class="user-container">
    <!-- 顶部清除浮动线 -->
    <div class="line-top"></div>
    <!-- 中间整个容器 -->
    <div class="container-in">
      <!-- 子组件-右则边栏-导航 -->
      <div class="aside">
        <Nav/>
      </div>
      <!-- /右则边栏 结束 -->
      <!-- 左边内容容器 开始 -->
      <div class="main">
        <!-- 子组件-顶部头像和各项统计 -->
        <Total :username="user.username" :userId="user.id" :avatar="user.avatar"
               :count="count" :aCount="aCount" :patronCount="patronCount" :privacy="privacy" :authId="userId"/>
        <el-divider/>
        <!-- 列表 -->
        <div class="list-box">
          <h2>{{ user.username }}收到的赞 <i class="iconfont icon-zan1"/></h2>
          <!-- 列表内容区域 -->
          <div class="content">
            <!-- 文章标题列表 开始 -->
            <ul>
              <li v-for="item in list" :key="item.id">
                <div class="item">
                  <el-card class="box-card">
                    <!-- 跳转到文章详情页面 -->
                    <div class="title-box">
                      <!-- 跳转到用户个人主页 -->
                      <div style="display: flex;align-items: center;">
                        <a :href="'/user/'+item.userId"><img :src="item.avatar" alt=""></a>
                        <div v-if="item.entityType == 0">
                          <a :href="'/user/'+item.userId"><b> {{ item.username }}</b></a>
                          赞了 <a :href="'/user/'+user.id">
                          <b>{{ user.username }}</b></a> 发布的文章
                          <el-divider direction="vertical"/>
                          <span class="time"><i class="el-icon-time"/> {{
                              getDateFormat(item.createTime)
                            }} </span>
                        </div>
                        <div v-if="item.entityType == 1">
                          <a :href="'/user/'+item.userId"><b>{{ item.username }}</b></a>
                          赞了 <a :href="'/user/'+user.id">
                          <b>{{ user.username }}</b></a> 发表的留言/回复
                          <el-divider direction="vertical"/>
                          <span class="time"><i class="el-icon-time"/> {{
                              getDateFormat(item.createTime)
                            }} </span>
                        </div>
                      </div>
                      <div class="ml40">
                        <a :href="'/article/'+item.articleId"><p>《{{ item.content }}》</p></a>
                      </div>
                    </div>
                  </el-card>
                </div>
              </li>
              <!-- 分页组件 开始 -->
              <template>
                <!-- md 分页组件 开始 -->
                <el-pagination
                  class="sm-hidden"
                  background
                  @current-change="handleCurrentChange"
                  :current-page="current"
                  :page-size="size"
                  layout="total, prev, pager, next, jumper"
                  :total="Number(total)">
                </el-pagination>
                <!-- sm 分页组件 开始 -->
                <el-pagination
                  class="md-hidden"
                  small
                  background
                  @current-change="handleCurrentChange"
                  :current-page="current"
                  :page-size="size"
                  layout="total,prev, pager, next"
                  :total="Number(total)">
                </el-pagination>
              </template>
              <!-- /分页组件 结束 -->
            </ul>
            <!-- /文章标题列表 结束 -->
          </div>
        </div>
      </div>
      <!-- /左边内容容器   -->
    </div>
    <!-- 底部清除浮动线 -->
    <div class="line-bottom"></div>
  </div>
</template>
<script>
import Nav from '@/components/user/nav'
import Total from '@/components/user/total'
import {dateFormat} from '@/utils/date' // 日期格式化

export default {
  name: "user-thumb",
  components: {
    Nav,
    Total
  },
  // 动态标题
  head() {
    return {
      title: this.user.username + ' 收到的赞 - 经历网',
      totalData: {}
    }
  },
  async asyncData({params, app, store}) {
    // 获取路由ID
    const routeId = params.id
    // 获取当前登录用户ID（用于判断是否能看到删除按钮）
    const userId = store.state.userInfo && store.state.userInfo.id || 0
    // 通过路由ID查询用户信息
    let {data: info} = await app.$getUserInfoByRouteId(routeId)
    const user = info.user
    // 统计-文章微服务
    const {data: articleServiceCount} = await app.$statisticCountArticle(routeId)
    const aCount = articleServiceCount.statistic
    // 统计-用户微服务
    const {data: userServiceCount} = await app.$statisticCountUser(routeId)
    const count = userServiceCount.count
    // 统计赞助总数（ 投图赞助+1元赞助+VIP赞助 ）
    const patronCount = aCount.looperCount + count.patronCount + count.sponsorCount
    // 分页列表
    const current = 1
    const size = 10
    const {data: thumbList} = await app.$getUserThumbList(routeId, current, size)
    const list = thumbList.records
    const total = (thumbList.total = null) ? 0 : thumbList.total
    // 获取各项隐私状态
    const {data} = await app.$getPrivacyStatus(routeId)
    const privacy = data.privacy

    return {
      routeId,
      userId,
      user,
      aCount,
      count,
      patronCount,
      current,
      size,
      list,
      total,
      privacy
    }
  },
  methods: {
    // 格式化日期时间
    getDateFormat(date) {
      return dateFormat(date)
    },
    // 刷新列表数据
    async fetchData() {
      const {data} = await this.$getUserThumbList(this.routeId, this.current, this.size)
      this.list = data.records
      this.total = data.total
    },
    // 切换分页
    handleCurrentChange(current) {
      this.current = Number(current)
      this.fetchData()
    }
  }
}
</script>

<style lang="less" scoped>

.icon-zan1{
  font-size: 22px;
}

// 外层大容器
.user-container {
  min-height: 630px;
  background-color: #242424;

  // 分页器
  .el-pagination {
    padding: 30px 0 50px;
  }

  // 页面左则容器、右则容器
  .main, .aside {
    border-radius: 4px;
    background-color: #FFFFFF;
  }

  .main {
    // 文章标题列表
    .list-box {
      padding-top: 30px;

      h2 {
        margin-bottom: 50px;
        text-align: center;
      }
    }

    .item {
      margin-bottom: 10px;

      .box-card {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);

        .title-box {
          font-size: 15px;
        }

        .ml40 {
          margin-left: 40px;
        }
      }

      .time {
        margin-top: 5px;
        font-size: 14px;
        color: #7a7f86;
      }

      p {
        margin: 0 20px 3px;
        font-size: 16px;
      }

      img {
        width: 35px;
        height: 35px;
        padding: 1px;
        border: #bbbec3 solid 1px;
        border-radius: 50%;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        object-fit: cover;
        margin-right: 20px;
      }

      img:hover {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
      }

      a:hover {
        color: #8205c6;
        text-decoration: underline;
      }
    }
  }
}

// md
@media screen and (min-width: 960px) {

  .user-container {

    .container-in {
      width: 80%;
      padding-bottom: 26px;
      margin: 0 auto;

      .main {
        float: left;
        width: 75%;
        margin-left: 26px;
        border-radius: 4px;

        // 列表区域
        .list-box {
          border-radius: 4px;

          // 列表内容区域
          .content {
            margin: 0 120px;
          }
        }
      }

      .aside {
        float: left;
        width: 23%;
        border-radius: 4px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
      }
    }
  }
}

// sm
@media screen and (max-width: 960px) {
  .user-container {

    .container-in {
      clear: both;
      width: 100%;

      .main {
        width: 100%;
        margin: 0 auto;

        // 列表区域
        .list-box {
          border-radius: 4px;
        }
      }

      .aside {
        width: 100%;
      }
    }
  }

}
</style>
